<template>
    <div class="alone-container">
      <div v-for="row in tableData" :key="row.id" class="item">
        <!-- 显示文章信息 -->
        <div class="item-info">
          <span class="title">{{ row.title }}</span>
          <span class="publish-date">{{ row.publishDate }}</span>
          <span class="stats">展现数: {{ row.views }}</span>
          <span class="stats">阅读数: {{ row.views }}</span>
          <span class="stats">推荐数: {{ row.likes }}</span>
          <span class="stats">评论数: {{ row.commentsCount }}</span>
          <span class="stats">收藏数: {{ row.favorites }}</span>
          
          <el-button @click="toggleExpand(row.id)" type="text">
            详情
            <i :class="isExpanded(row.id) ? 'icon-up' : 'icon-down'"></i>
          </el-button>
        </div>
  
        <!-- 展开显示详细内容 -->
        <div v-if="isExpanded(row.id)" class="expand-content">
          <div class="top-line">
            <dataCanvas :req-url="'/api/books/book_record/' + row.id"></dataCanvas>
          </div>
        </div>
      </div>
  
      <!-- 分页控件 -->
      <div class="pagination">
        <el-pagination 
        background
        layout="prev, pager, next"
        :total="pagination.totalRecords"
        :page-size="pagination.size"
        :current-page="pagination.page"
        @current-change="handlePageChange"
        style="text-align: center; margin-top: 20px;"
      />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch, onMounted } from 'vue';
  import dataCanvas from './dataCanvas.vue';
import axios from 'axios';
import { useUserStore } from '@/stores/user';
  
  const userStore = useUserStore();
  interface Article {
    id: number;
    title: string;
    publishDate: string;
    exposure: number;
    views: number;
    likes: number;
    commentsCount: number;
    favorites: number;
  }
  const pagination = ref({
  page: 1,         // 当前页
  size: 10,        // 每页条数
  totalPages: 1,   // 总页数
  totalRecords: 0  // 总记录数
});
  const tableData = ref<Article[]>([
    { id: 1, title: '玄幻书籍', publishDate: '2024-09-23', exposure: 59, views: 59, likes: 2, commentsCount: 0, favorites: 0 },
    // Add more entries as needed
]);

  
  const pageSize = 5;
  const currentPage = ref(1);
  const selectedArticleId = ref<number | null>(null);
    const fetchNovels = (page: number, size: number) => {
  axios.get(`/api/books/author/${userStore.userInfo.id}?pageNum=${page}&pageSize=${size}`, {
    
  }).then((res) => {
    console.log(res);
    const data = res.data.data;

    // 更新小说列表
    tableData.value = data.listData;

    // 更新分页信息
    pagination.value.page = data.page;
    pagination.value.size = data.size;
    pagination.value.totalPages = data.totalPages;
    pagination.value.totalRecords = data.totalRecords;
  });
};
// 监听分页切换事件
const handlePageChange = (newPage: number) => {
  pagination.value.page = newPage;
  fetchNovels(newPage, pagination.value.size); // 请求新页数据
};
  
  function toggleExpand(id: number) {
    selectedArticleId.value = selectedArticleId.value === id ? null : id;
  }
  
  function isExpanded(id: number) {
    return selectedArticleId.value === id;
  }
  
  watch(currentPage, () => {
    selectedArticleId.value = null; // 分页切换时折叠所有行
  });
  onMounted(() => {
  fetchNovels(pagination.value.page, pagination.value.size);
});
  </script>
<style scoped>
.alone-container {
  margin: 20px;
}

.item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.title {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
  width: 150px; /* 为标题字段设置宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-date,
.stats {
  margin-right: 10px;
  color: #666;
  width: 100px; /* 为日期字段和其他字段设置相同的宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expand-content {
  padding: 20px;
  background-color: #f9f9f9;
  margin-top: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
